.screen-wrapper {
	height: 100%;
	width: 100%;
	background: greenyellow;
	@color-main: #825723;
	@color-border: #efd7a1;

	html {
		overflow: hidden;
	}

	body {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-flow: column;
		width: 100vw;
		height: 100vh;
	}

	.ruler {
		display: flex;
		justify-content: space-between;
		width: calc(16cm + 5px);
		height: 3cm;
		border: 1px solid @color-border;
		background-image: repeating-linear-gradient(90deg, @color-main 0, @color-main 5px, transparent 0, transparent 1cm), repeating-linear-gradient(90deg, @color-main 0, @color-main 2px, transparent 0, transparent 0.5cm), repeating-linear-gradient(90deg, @color-main 0, @color-main 1px, transparent 0, transparent 0.1cm);
		background-repeat: no-repeat;
		background-position: 0.5cm 100%, calc(0.5cm + 1.5px) 100%, calc(0.5cm + 2px) 100%;
		background-size: 100% 30px, calc(100% - 1cm) 20px, calc(100% - 1.2cm) 10px;

		span {
			flex: 1;
			margin-top: 55px;
			text-align: center;
		}
	}

}